<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/stylesheets/register.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</head>

<body>
    <div class="page-wrap">
        <div class="w">
            <div class="user-con">
                <div class="user-title">用户注册</div>
                <div class="user-box">
                    <div class="error-item">
                        <i class="fa fa-minus-circle error-icon"></i>
                        <p class="err-msg">Error</p>
                    </div>
                    <form class="form" action="/register" method="post">
                        <div class="user-item">
                            <label class="user-label" for="username">
                                <i class="fa fa-user"></i>
                            </label>
                            <input class="user-content" data-name name="loginname" placeholder="请输入用户名" autocomplete="off">
                        </div>
                        <div class="user-item">
                            <label class="user-label" for="password">
                                <i class="fa fa-lock"></i>
                            </label>
                            <input type="password" class="user-content" data-pass name="password" placeholder="请输入密码" autocomplete="off">
                        </div>
                        <div class="user-item">
                            <label class="user-label" for="password-confirm">
                                <i class="fa fa-lock"></i>
                            </label>
                            <input type="password" class="user-content" data-confirm name="confirm" placeholder="请再次输入密码" autocomplete="off">
                        </div>
                        <div class="user-item">
                            <%= firstnum %> +
                                <%=secondnum%> =
                                    <input type="text" class="" data-num autocomplete="off" name="vnum">
                        </div>

                        <input type="submit" class="btn btn-submit" id="submit">
                    </form>
                    <div class="link-item">
                        <a class="link" href="/users/loginpage">已有帐号，去登录>></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
      const form = document.querySelector(".form");
      const login = form.querySelector("[data-name]");
      const pass = form.querySelector("[data-pass]");
      const conf = form.querySelector("[data-confirm]");
      const num = form.querySelector("[data-num]");
      form.onsubmit = function (event) {
        event.preventDefault();
        console.log("fffffffffff");
        if (pass.value != conf.value) {
          alert("两次输入的密码不一样");
        } else {
          let loginname = login.value;
          let password = pass.value;
          let confirm = conf.value;
          let vnum = num.value;
          fetch("/register", {
            method:"POST",
            body: JSON.stringify({loginname, password, confirm, vnum}),
            headers:{
              "Content-Type":"application/json"
            }
          })
          .then(res => res.text())
          .then(error => {
            if (error) {
              error = JSON.parse(error);
              if (error.str && error.str != "注册成功") {
                alert(error.str)
              } else if (error.str && error.str == "注册成功") {
                window.location.href = "/users/loginpage";
              }
            }
          })
        }
      };
    </script>
</body>

</html>
